<template>
  <div class="chart-container hide-scroller-bar" ref="centerControlEnergy">
    <a-row :gutter="[0, rowGap]">
      <a-col :span="24">
        <a-row :gutter="[rowGap, rowGap]">
          <a-col
            :span="24"
            v-if="isMobile"
            :style="{ height: rowHeight + 'px' }"
          >
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <MeetingRoomNumTotal />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="6" :style="{ height: rowHeight + 'px' }">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <MeetingRoomUseRate />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="6" :style="{ height: rowHeight + 'px' }">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <MeetingRoomOrderTimesRank />
            </transition>
          </a-col>
          <a-col
            :xs="24"
            :sm="6"
            v-if="!isMobile"
            :style="{ height: rowHeight + 'px' }"
          >
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <MeetingRoomDetail
                :detail="currentRoomDetail"
                :time="roomTimeDetail"
              />
            </transition>
          </a-col>
          <a-col
            :span="6"
            v-if="!isMobile"
            :style="{ height: rowHeight + 'px' }"
          >
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <MeetingRoomNumTotal />
            </transition>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row
          :gutter="[rowGap, rowGap]"
          :style="{ height: rowHeight * 2 + rowGap + 6 + 'px' }"
        >
          <a-col :xs="24" :sm="6" class="col-box">
            <div style="height: 40%">
              <transition
                appear
                name="animate__animated animate__bounce"
                enter-active-class="animate__zoomIn"
              >
                <MeetingRoomUseRateRank />
              </transition>
            </div>
            <div :style="{ height: '60%', marginTop: rowGap + 'px' }">
              <transition
                appear
                name="animate__animated animate__bounce"
                enter-active-class="animate__zoomIn"
              >
                <MeetingRoomOrderDuration />
              </transition>
            </div>
          </a-col>
          <a-col
            :xs="24"
            :sm="12"
            :style="
              isMobile
                ? {
                    height: rowHeight + 160 + 'px',
                    paddingTop: rowGap + 'px',
                    paddingBottom: rowGap + 'px',
                  }
                : 'height: 100%'
            "
          >
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <MeetingRoomTime
                :roomList="roomList"
                @change="handleRoomTimeChange"
              />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="6" class="col-box">
            <div style="height: 40%">
              <transition
                appear
                name="animate__animated animate__bounce"
                enter-active-class="animate__zoomIn"
              >
                <MeetingRoomDuration />
              </transition>
            </div>
            <div
              :style="
                $store.getters.dataVMobile
                  ? { marginTop: rowGap + 'px' }
                  : { height: '60%', marginTop: rowGap + 'px' }
              "
            >
              <transition
                appear
                name="animate__animated animate__bounce"
                enter-active-class="animate__zoomIn"
              >
                <MeetingRoomUseRecord />
              </transition>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import store from "../../../../store/index";
import MeetingRoomUseRate from "./MeetingRoomUseRate.vue";
import MeetingRoomOrderTimesRank from "./MeetingRoomOrderTimesRank.vue";
import MeetingRoomUseRateRank from "./MeetingRoomUseRateRank.vue";
import MeetingRoomOrderDuration from "./MeetingRoomOrderDuration.vue";
import MeetingRoomNumTotal from "./MeetingRoomNumTotal.vue";
import MeetingRoomDuration from "./MeetingRoomDuration.vue";
import MeetingRoomUseRecord from "./MeetingRoomUseRecord.vue";
import MeetingRoomTime from "./MeetingRoomTime.vue";
import MeetingRoomDetail from "./MeetingRoomDetail.vue";

export default defineComponent({
  name: "CenterControlMeetingRoom",
  components: {
    MeetingRoomUseRate,
    MeetingRoomOrderTimesRank,
    MeetingRoomUseRateRank,
    MeetingRoomOrderDuration,
    MeetingRoomNumTotal,
    MeetingRoomDuration,
    MeetingRoomUseRecord,
    MeetingRoomTime,
    MeetingRoomDetail,
  },
  setup() {
    const state = reactive({
      centerControlEnergy: null,
      pageHeight: 900,
      rowHeight: 240,
      rowNum: 3, // 均分的行数
      totalRowNum: 3,
      rowGap: 16,
      roomList: [],
      currentRoomDetail: {},
      roomTimeDetail: null,
    });

    watch(
      () => store.getters.centerControl.MeetingRoom_roomList,
      (val) => {
        if (val) {
          getRoomList();
        }
      }
    );

    const getRoomList = () => {
      const { MeetingRoom_roomList } = store.getters.centerControl;
      if (MeetingRoom_roomList) {
        state.roomList = MeetingRoom_roomList.map((item, index) => {
          item.key = "meeting_room_" + index;
          item.orderTimes = item.reserved_time.map((item) => [
            item.start_time_txt,
            item.end_time_txt,
          ]);
          return item;
        });
      }
      state.currentRoomDetail = state.roomList[0];
    };

    const handleRoomTimeChange = (detail) => {
      const { type, value } = detail;
      if (type == "room") {
        state.currentRoomDetail = state.roomList.find(
          (item) => item.key == value
        );
        state.roomTimeDetail = null;
        return;
      }
      if (type == "time") {
        state.roomTimeDetail = value;
        return;
      }
    };

    watch(
      () => store.getters.resizeTrigger,
      () => {
        getPageHeight();
      }
    );

    const isMobile = computed(() => store.getters.dataVMobile);

    const getPageHeight = () => {
      if (isMobile.value) {
        state.rowHeight = 240;
      } else {
        state.pageHeight = state.centerControlEnergy.offsetHeight;
        state.rowHeight = Math.floor(
          state.pageHeight / state.rowNum - state.rowGap - 6
        );
      }
    };

    onMounted(() => {
      getRoomList();
      getPageHeight();
    });

    return {
      isMobile,
      ...toRefs(state),
      handleRoomTimeChange,
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.chart-container {
  overflow: hidden auto;
  margin-top: 6px;
  .col-box {
    height: 100%;
  }
}
</style>
